<template>
    <div class="aside">
        <div class="header">
            <div class="avatar">
                <img src="@/assets/vue.svg" alt="用户头像">
            </div>
            <div class="user-info">
                <h3>用户名</h3>
            </div>
        </div>
        <div class="content">
            <div class="message-container" v-for="(item,index) in message" :key="index">
                <div class="message">
                    <p>{{ item.content }}</p>
                </div>
            </div>
        </div>
        <div class="footer">
          <div class="model-selector">
            <div class="model-title">切换AI模型</div>
            <div class="select-wrapper">
              <select 
                v-model="currentModel"
                class="model-select"
                @change="selectModel(currentModel)"
              >
                <option 
                  v-for="model in aiModels" 
                  :key="model.id" 
                  :value="model.id"
                >
                  {{ model.name }}
                </option>
              </select>
            </div>
          </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const message = ref([
    { content: "多模态AI能够处理和理解多种类型的数据，如文本、图像、音频和视频。例如，它可以描述图像内容、生成与文本匹配的图像，或从视频中理解情境。" },
    { content: "AI的多模态处理技术能够跨越不同的数据类型，提高机器学习的精度和应用广度。" },
    { content: "多模态AI能够通过组合图像、声音、文字等信息，解决复杂的理解任务。" },
    { content: "多模态AI的应用包括但不限于自动驾驶、健康诊断和智能助理。" },
    { content: "随着技术的发展，多模态AI在各个领域的应用将持续增长。" },
    { content: "多模态AI能够处理和理解多种类型的数据，如文本、图像、音频和视频。例如，它可以描述图像内容、生成与文本匹配的图像，或从视频中理解情境。" },
    { content: "AI的多模态处理技术能够跨越不同的数据类型，提高机器学习的精度和应用广度。" },
    { content: "多模态AI能够通过组合图像、声音、文字等信息，解决复杂的理解任务。" },
    { content: "多模态AI的应用包括但不限于自动驾驶、健康诊断和智能助理。" },
    { content: "随着技术的发展，多模态AI在各个领域的应用将继续增长。" },
    { content: "多模态AI能够处理和理解多种类型的数据，如文本、图像、音频和视频。例如，它可以描述图像内容、生成与文本匹配的图像，或从视频中理解情境。" },
    { content: "AI的多模态处理技术能够跨越不同的数据类型，提高机器学习的精度和应用广度。" },
    { content: "多模态AI能够通过组合图像、声音、文字等信息，解决复杂的理解任务。" },
    { content: "多模态AI的应用包括但不限于自动驾驶、健康诊断和智能助理。" },
    { content: "随着技术的发展，多模态AI在各个领域的应用将继续增长。" },
    { content: "多模态AI能够处理和理解多种类型的数据，如文本、图像、音频和视频。例如，它可以描述图像内容、生成与文本匹配的图像，或从视频中理解情境。" },
    { content: "AI的多模态处理技术能够跨越不同的数据类型，提高机器学习的精度和应用广度。" },
    { content: "多模态AI能够通过组合图像、声音、文字等信息，解决复杂的理解任务。" },
    { content: "多模态AI的应用包括但不限于自动驾驶、健康诊断和智能助理。" },
    { content: "随着技术的发展，多模态AI在各个领域的应用将继续增长。" },
    { content: "多模态AI能够处理和理解多种类型的数据，如文本、图像、音频和视频。例如，它可以描述图像内容、生成与文本匹配的图像，或从视频中理解情境。" },
    { content: "AI的多模态处理技术能够跨越不同的数据类型，提高机器学习的精度和应用广度。" },
    { content: "多模态AI能够通过组合图像、声音、文字等信息，解决复杂的理解任务。" },
    { content: "多模态AI的应用包括但不限于自动驾驶、健康诊断和智能助理。" },
    { content: "随着技术的发展，多模态AI在各个领域的应用将持续增长。" },
    { content: "多模态AI能够处理和理解多种类型的数据，如文本、图像、音频和视频。例如，它可以描述图像内容、生成与文本匹配的图像，或从视频中理解情境。" },
    { content: "AI的多模态处理技术能够跨越不同的数据类型，提高机器学习的精度和应用广度。" },
    { content: "多模态AI能够通过组合图像、声音、文字等信息，解决复杂的理解任务。" },
    { content: "多模态AI的应用包括但不限于自动驾驶、健康诊断和智能助理。" },
    { content: "随着技术的发展，多模态AI在各个领域的应用将继续增长。" },
    { content: "多模态AI能够处理和理解多种类型的数据，如文本、图像、音频和视频。例如，它可以描述图像内容、生成与文本匹配的图像，或从视频中理解情境。" },
    { content: "AI的多模态处理技术能够跨越不同的数据类型，提高机器学习的精度和应用广度。" },
    { content: "多模态AI能够通过组合图像、声音、文字等信息，解决复杂的理解任务。" },
    { content: "多模态AI的应用包括但不限于自动驾驶、健康诊断和智能助理。" },
    { content: "随着技术的发展，多模态AI在各个领域的应用将继续增长。" },
    { content: "多模态AI能够处理和理解多种类型的数据，如文本、图像、音频和视频。例如，它可以描述图像内容、生成与文本匹配的图像，或从视频中理解情境。" },
    { content: "AI的多模态处理技术能够跨越不同的数据类型，提高机器学习的精度和应用广度。" },
    { content: "多模态AI能够通过组合图像、声音、文字等信息，解决复杂的理解任务。" },
    { content: "多模态AI的应用包括但不限于自动驾驶、健康诊断和智能助理。" },
    { content: "随着技术的发展，多模态AI在各个领域的应用将继续增长。" },
])

// AI模型列表
const aiModels = ref([
  { id: 'gpt-3.5', name: 'GPT-3.5' },
  { id: 'gpt-4', name: 'GPT-4' },
  { id: 'claude', name: 'Claude' },
  { id: 'gemini', name: 'Gemini' }
])

// 当前选中的模型
const currentModel = ref('gpt-3.5')

// 选择模型的方法
function selectModel(modelId: string) {
  currentModel.value = modelId
}
</script>

<style lang="scss" scoped>
.aside {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #1e293b;
  color: #e2e8f0;
  border-right: 1px solid #334155;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

  .header {
    height: 5rem;
    background-color: #0f172a;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    border-bottom: 1px solid #334155;

    .avatar {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid #4f46e5;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .user-info {
      margin-left: 0.75rem;

      h3 {
        color: #e2e8f0;
        font-weight: 500;
      }
    }
  }

  .content {
    flex: 1;
    overflow-y: auto;
    background-color: #1e293b;
    padding: 10px;
    border-bottom: 1px solid #334155;
    
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
      width: 0;
      height: 0;
    }
    
    .message-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.5rem;

      .message {
        width: 250px;
        background-color: #2d3748;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

        p {
          font-size: 1rem;
          color: #e2e8f0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 10px;
        }
      }
    }
  }

  .footer {
    height: 5rem;
    background-color: #0f172a;
    padding: 0 1rem;
    display: flex;
    align-items: center;

    .model-selector {
      width: 100%;
      
      .model-title {
        color: #e2e8f0;
        margin-bottom: 0.5rem;
        font-weight: 500;
      }
      
      .select-wrapper {
        position: relative;
        width: 100%;
        
        .model-select {
          width: 100%;
          padding: 0.5rem;
          border-radius: 0.25rem;
          border: 1px solid #4f46e5;
          background-color: #2d3748;
          color: #e2e8f0;
          font-size: 0.875rem;
          appearance: none;
          cursor: pointer;
          outline: none;
          
          &:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
          }
        }
        
        &::after {
          content: '';
          position: absolute;
          right: 0.75rem;
          top: 50%;
          transform: translateY(-50%);
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 5px solid #e2e8f0;
          pointer-events: none;
        }
      }
    }
  }
}
</style>
